<template>
  <div class="MusicPage">
    <!-- 左侧歌单 -->
    <el-aside width="200px">
      <!-- 左侧歌单  -->
      <el-collapse
        v-model="activeNames"
        @change="handleChange"
        class="Aside-songlist"
      >
        <!-- 系统歌单 和 收藏歌单-->
        <el-collapse-item
          v-for="(list, index) in song_list"
          :name="list.name"
          :key="index"
        >
          <template slot="title">
            <span
              class="list_name"
              style="
                padding: 0 5px 0 20px;
                width: 100px;
                text-align: left;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              "
              >{{ list.name }}</span
            ><i
              class="header-icon"
              :class="list.icon"
              @click.stop="playAll(list.tracks)"
            ></i>
            <span v-if="list.tracks" style="padding: 0 0 0 10px"
              >{{ list.tracks.length || "0" }}首歌</span
            >
          </template>
          <!--  -->
          <ul class="song-list" v-infinite-scroll="load">
            <template v-if="song_list[index].tracks">
              <song-item
                v-for="(item, indexx) in song_list[index].tracks"
                :key="indexx"
                :index="indexx"
                class="song-item"
                :song="item"
                :noDeleteSong="true"
              ></song-item>
            </template>
            <el-empty
              v-else
              :image-size="200"
              description="暂无歌曲"
            ></el-empty>
          </ul>
        </el-collapse-item>
      </el-collapse>
      <!--  -->
    </el-aside>
    <!-- 右侧主体 -->
    <el-container>
      <el-main>
        <el-aside width="250px">
          <h2>
            最新音乐
            <span class="el-icon-video-play" @click="playAll(newsong)"></span>
          </h2>
          <ul
            class="Recommend-tracks-list"
            v-infinite-scroll="load"
            v-if="newsong"
          >
            <song-item
              v-for="(item, index) in newsong"
              :key="index"
              :index="index"
              :song="item"
              :noDeleteSong="true"
            ></song-item>
          </ul>
        </el-aside>
        <el-main>
          <ul class="Recommend-playlist">
            <songListItem
              v-for="(item, index) in Recommend_playlist"
              :key="index"
              :item="item"
            ></songListItem>
            <!-- class="Recommend-playlist-item" -->
          </ul>
          <div class="Recommend-card">
            <!-- <div class="rank">
              <p>排行</p>
            </div> -->
            <div class="artist" @click="toSingerPage">
              <p>歌手</p>
            </div>
            <!-- <div class="songList">
              <p>歌单</p>
            </div>
            <div class="classify">
              <p>分类</p> -->
            <!-- </div> -->
          </div>
        </el-main>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import axios from "axios";
import songItem from "../../components/songItem/index.vue";
import songListItem from "../../components/songListItem/index.vue";
import store from "../../store";
import { localStorage } from "../../request";

export default {
  name: "MusicPage",

  data() {
    return {
      msg: "desktop music app",
      activeNames: ["1"],
      Recommend_playlist: null,
      newsong: null,
      count: 0,
      song_list: [
        {
          name: "收藏",
          tracks: null,
          icon: "el-icon-star-on",
        },
        {
          name: "历史播放",
          tracks: null,
          icon: "el-icon-alarm-clock",
        },
      ],
    };
  },

  components: {
    songItem,
    songListItem,
  },

  computed: {
    My_percent: function () {
      return store.state.Counter.My_percent;
    },
    My_percent1: function () {
      return store.getters.My_percent;
    },
    reload_DB: function () {
      return store.state.Counter.reload_DB;
    },
    currentEmail: function () {
      return store.state.Counter.currentEmail;
    },
  },

  watch: {
    reload_DB: function (after, before) {
      if (after) {
        localStorage.getItem("email:" + this.currentEmail).then((res) => {
          let data = res.data.Favorite_Songs;
          this.song_list[0].tracks = data;
        });
        localStorage.getItem("email:" + this.currentEmail).then((res) => {
          let data = res.data.Historical_Songs_List;
          this.song_list[1].tracks = data;
        });
        //获取收藏歌单
        localStorage.getItem("email:" + this.currentEmail).then((res) => {
          let data = res.data.Favorite_SongsList;
          data = data.map((item) => {
            return {
              ...item,
              icon: "el-icon-star-off",
            };
          });
          this.song_list = [this.song_list[0], this.song_list[1], ...data];
        });
      }
    },
  },

  created() {
    // 推荐歌单
    axios
      .get("https://apis.netstart.cn/music/personalized?limit=30")
      .then((res) => {
        // console.log(res.data);
        this.Recommend_playlist = res.data.result;
      });

    // 推荐音乐
    axios
      .get("https://apis.netstart.cn/music/personalized/newsong")
      .then((res) => {
        // console.log(res.data);
        this.newsong = res.data.result;
      });

    //获取收藏歌曲
    localStorage.getItem("email:" + this.currentEmail).then((res) => {
      let data = res.data.Favorite_Songs;
      this.song_list[0].tracks = data;
    });

    // 获取历史歌单
    localStorage.getItem("email:" + this.currentEmail).then((res) => {
      let data = res.data.Historical_Songs_List;
      this.song_list[1].tracks = data;
    });

    //获取收藏歌单
    localStorage.getItem("email:" + this.currentEmail).then((res) => {
      let data = res.data.Favorite_SongsList;
      data = data.map((item) => {
        return {
          ...item,
          icon: "el-icon-star-off",
        };
      });
      this.song_list = [this.song_list[0], this.song_list[1], ...data];
    });
  },

  mounted() {},

  methods: {
    handleChange(val) {
      // console.log(val);
    },
    load() {
      console.log(this.count);
      if (this.count < 100) {
        this.count += 10;
      }
    },
    playAll(list) {
      console.log(list);
      store.commit("upload_playing_list", list);
    },
    toSingerPage() {
      this.$router.push("/home/singerList");
    },
  },
};
</script>

<style lang="sass" scoped>
@import "./index.scss"
</style>